<template>
  <div class="tb1" v-if="props.type === 'Pay'">
    <table cellspacing="0" class="jstable">
      <!-- <button @click="edit">修改第一条数据</button> -->
      <thead>
        <tr>
          <th rowspan="2" class="p-22214">Pay</th>

          <th class="j-b-l pay-h1 mimW b-b-p">
            <span class="p13777"> Discount:</span>
            <span class="p-22214">
              12.00
              <span class="p13222"><span class="p13222">USD</span></span></span
            >
            <el-divider border-style="dashed" />
          </th>
          <th class="j-b-l mimW b-b-p">
            <span class="p13777"> Discount:</span>
            <span class="p-22214"> 12.00 <span class="p13222">USD</span></span>
            <el-divider border-style="dashed" />
          </th>
        </tr>
        <tr>
          <th class="j-b-l pay-h1">
            <span class="p13777"> Shipping cost:</span>
            <span class="p-22214"> 12.00 <span class="p13222">USD</span></span>
          </th>
          <th class="j-b-l">
            <span class="p13777"> Paid date:</span>
            <span class="p-22214"> 2022-08-25</span>
          </th>
        </tr>
        <tr>
          <th class="j-b-l pay-h1"></th>
          <th class="j-b-l p-22214"></th>
          <th class="j-b-l p-22214"></th>
        </tr>
        <tr class="pay-h1-t1">
          <th class="j-b-l pay-h1">Product</th>
          <th class="j-b-l tright">Cost</th>
          <th class="j-b-l">Total</th>
        </tr>
      </thead>
      <tbody id="address-td">
        <tr>
          <td>
            <OrderProduct :scope="''" />
          </td>
          <td class="tright">12.00 <span class="p13222">USD</span></td>
          <td>Awaiting confirm</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!--  -->
  <table cellspacing="0" class="Unpay" v-if="props.type === 'Unpay'">
    <!-- <button @click="edit">修改第一条数据</button> -->
    <thead>
      <tr>
        <th colspan="4" class="unpay-b-4 p-22214">Unpay</th>
      </tr>
      <tr>
        <th rowspan="2">Product</th>
        <th class="j-b-l tcenter" colspan="3">ScareOrder Quote</th>
      </tr>
      <tr>
        <th class="j-b-l tright">Product cost</th>
        <th class="j-b-l">Shipping</th>
        <th class="j-b-l">Total</th>
      </tr>
    </thead>
    <tbody id="address-td">
      <tr>
        <td>
          <OrderProduct :scope="''" />
        </td>
        <td class="tright">12.00 <span class="p13222">USD</span></td>
        <td>Awaiting confirm</td>
        <td>Awaiting</td>
      </tr>
    </tbody>
  </table>
  <!-- Abandoned1-->
  <table cellspacing="0" class="Unpay" v-if="props.type === 'Abandoned1'">
    <!-- <button @click="edit">修改第一条数据</button> -->
    <thead>
      <tr>
        <th colspan="4" class="unpay-b-4 p-22214">Abandoned</th>
      </tr>
    </thead>
    <tbody id="address-td">
      <tr>
        <td>
          <OrderProduct :scope="''" />
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Abandoned-->
  <table cellspacing="0" class="Unpay" v-if="props.type === 'Abandoned'">
    <!-- <button @click="edit">修改第一条数据</button> -->
    <thead>
      <tr>
        <th colspan="4" class="unpay-b-4 p-22214">Abandoned</th>
      </tr>
      <tr v-if="props.type === 'Abandoned'">
        <th rowspan="2" class="unpay-b-4">Product</th>
        <th class="j-b-l unpay-b-4" colspan="3">Status</th>
      </tr>
    </thead>
    <tbody id="address-td">
      <tr>
        <td>
          <OrderProduct :scope="''" />
        </td>
        <td>12.00 <span class="p13222">USD</span></td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import OrderProduct from "@/components/OrderTable/orderProduct.vue";
const props = defineProps(["type"]);
console.log(props.type);
</script>

<style lang="scss" scoped>
table {
  // margin-top: 20px;
  width: 100%;
}
.tb1 {
  border: 1px solid #ebeef5;
  padding-top: 10px;
  margin-bottom: 20px;
}
.Unpay,
.unpay-b-4 {
  margin-bottom: 20px;
}

.jstable {
  th {
    border: none !important;
  }
  .pay-h1 {
    padding: 10px;
    // background-color: #ebeef5;
  }
  .pay-h1-t1 {
    padding: 10px 0;
  }
  .mimW {
    min-width: 200px;
  }
  .el-divider--horizontal {
    position: absolute;
    margin: 0;
    width: 80%;
    bottom: 0;
  }
  .b-b-p {
    position: relative;
  }
}
.Unpay {
  border: 1px solid #ebeef5;
  .j-b-l {
    border-left: 1px solid #ebeef5 !important;
  }
  th {
    color: var(--unnamed, #777);
    font-size: 13px;
    font-weight: 400;
    border-bottom: 1px solid #ebeef5 !important;
    vertical-align: middle;
    text-align: left;
    padding: 3px 12px;
  }
  td {
    border-top: 1px solid #ebeef5;
    padding: 10px 12px;
  }
  .unpay-b-4 {
    padding: 12.5px 10px;
    border-left: none !important;
  }
}
.redDiv {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #bc1f22;
  margin-right: 10px;
}
.tb1 tr:hover {
  box-shadow: none;
}
</style>
